<template>
    <div class="app">
        <div class="details">
            <div style="width:100%; display: flex;justify-content: end;">
                <!-- <el-button type="primary" v-if="docForm.revise=='0'&&docForm.isModi=='0'" @click="drawershow">事务审批</el-button> -->
                <!-- <el-button type="info" v-if="docForm.isModi=='1'">事物审批中</el-button> -->
            </div>
        </div>
        <!-- 执行任务 -->
        <div class="details-content">
            <span class="details-content-title">{{docForm.name}}</span>
            <el-tabs v-model="operation" @tab-click="handleClick">
                <el-tab-pane label="变更记录" name="third">
                    <div class="details-content-operation-item" style="display:flex;justify-content:space-between;" v-for="item in changeLog">
                        <div>
                            <i class="el-icon-edit details-content-operation-item-icon"></i>
                            <span class="details-content-operation-item-name">{{item.createName}}</span>
                            <span class="details-content-operation-item-title">{{item.content}}</span>
                            <span class="details-content-operation-item-date">{{item.createTime}}</span>
                        </div>
                        <span style="cursor: pointer;font-size:14px" @click='todetails(item)'>查看详情</span>
                           <!-- <i v-if="sysUser.userId=='admin'" class="el-icon-delete task-enclosure-del-icon" @click="delectmodi(item,index)"></i> -->
                    </div>
                    <pagination v-show="total>0" :total="total" :current.sync="current" :size.sync="size" @pagination="handleClicklist" />
                    <el-empty description="暂无日志" v-if="changeLog.length == 0"></el-empty>

                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
import pagination from "@/components/Pagination/index.vue";
import { list,del as modidel} from "@/api/modi";
import { queryById } from "@/api/project.js";
import chooseStatusBotton from "@/components/chooseStatus/docStasus.vue";
import utils from "@/utils/utils.js";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import Parser from "@/components/FormGenerator/components/parser";
import { list as logList } from "@/api/log.js";
import { Message } from "element-ui";
import ExecuteTask from "@/components/task/ExecuteTask.vue";
import { mapState, mapGetters } from "vuex";
export default {
    name: "projectProcess",
    data() {
        return {
            form: [
                {
                    value: "00",
                    label: "待审批",
                    type: false,
                    color: "rgb(100, 203, 148)",
                    icon: "icon-icon-daishenpi-copy",
                    taskType: 0,
                },
                {
                    value: "01",
                    label: "审批中",
                    type: false,
                    color: "rgb(86, 198, 255)",
                    icon: "icon-shenhezhong-copy",
                    taskType: 0,
                },
                {
                    value: "02",
                    label: "已审批",
                    type: false,
                    color: "rgb(70, 216, 171)",
                    icon: "icon-yiwancheng-copy",
                    taskType: 0,
                },
                {
                    value: "03",
                    label: "已驳回",
                    type: false,
                    color: "rgb(80, 196, 27)",
                    icon: "icon-bohui",
                    taskType: 0,
                },
                {
                    value: "04",
                    label: "已过期",
                    type: false,
                    color: "rgb(248, 120, 103)",
                    icon: "icon-yemian-1",
                    taskType: 0,
                },
            ],
            itemData: {
                value: "00",
                label: "已上传",
                type: false,
                color: "rgb(250, 145, 31)",
                icon: "icon-yishangchuan",
                taskType: 0,
            },
            refreshLoading: false,
            operation: "third",
            operationLog: [],
            docForm: {},
            changeLog: [],
            formData: "",
            executeTaskId: "",
            dialogExcuteTaskVisible: false,
            processInstanceId: "",
            total: 0,
            current: 1,
            size: 20,
        };
    },
    components: {
        chooseStatusBotton,
        Parser,
        ExecuteTask,
        pagination,
    },
        computed: {
        ...mapGetters(["sysRole",'sysUser']),
    },
    filters: {},
    created() {
        this.docForm.projId = this.$route.query.id;
        this.queryClick();
        this.handleClicklist();
    },
    methods: {
                delectmodi(item, index) {
            this.$confirm("确认删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                modidel({ ids: item.modiId }).then((res) => {
                    this.changeLog.splice(index, 1);
                });
            });
        },
        todetails(item) {
            var data = {
                transId: item.modiId,
                id: item.processInstanceId,
                type: "ccToMe",
            };
            this.$router.push({
                path: "/project/process",
                query: {
                    data: JSON.stringify(data),
                },
            });
        },
        queryClick() {
            var _this = this;
            queryById({
                id: this.docForm.projId,
            }).then((res) => {
                console.log(res);
                _this.docForm = res.data;
                if (res.data.formData) {
                    _this.docForm.formData = JSON.parse(res.data.formData);
                }
                _this.loadLogList();
            });
        },
        handleClicklist(data) {
            var _this = this;
            list(
                {
                    modiTypeId: this.docForm.projId,
                    modiType: "00",
                    current: this.current,
                    size: this.size,
                },
                false
            ).then((res) => {
                _this.changeLog = res.data.records;
                _this.total = res.data.total;
            });
        },
        handleClick(data) {
            console.log(data);
            if (data.name == "third") {
                this.handleClicklist();
                // 	var _this = this
                // 	console.log(this.taskForm)
                // logList({
                // 	modiTypeId: this.docForm.projId,
                // 	logType: '06'
                // },false).then(res => {
                // 	_this.operationLog = res.data
                // 	console.log(res)
                // })
            } else {
                this.loadLogList();
            }
        },
        // 操作
        loadLogList() {
            var _this = this;
            console.log(this.taskForm);
            logList(
                {
                    logTypeId: _this.docForm.projId,
                    logType: "00",
                },
                false
            ).then((res) => {
                _this.operationLog = res.data;
                console.log(res);
            });
        },
    },
};
</script>

<style scoped>
.app {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 84px);
}

.details {
    z-index: 1;
    margin-top: 0;
    flex: none;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 -1px 0 0 #dadee3;
    padding: 10px 10px;
    box-sizing: border-box;
}

.details-header-status {
    border-radius: 3px;
    padding: 6px 16px;
    border: 1px solid #dadee3;
}

.details-popover-icon {
    font-size: 16px;
    margin-right: 5px;
}

.details-popover-item-item {
    color: #2e405e;
    font-size: 12px;
    line-height: 18px;
}

.rejected {
    color: rgb(236, 0, 25);
}

.completed {
    color: rgb(254, 188, 8);
}

.inProgress {
    color: rgb(74, 144, 226);
}

.toDo {
    color: rgb(254, 115, 0);
}

.details-header-button {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details-header-button-icon {
    padding: 8px 8px;
    color: #909aaa;
    font-size: 18px;
    margin-left: 10px;
    border-radius: 50%;
}

.details-header-button-icon:hover {
    background-color: #f5f6f8;
}

.refreshRe {
    -webkit-animation: rotate 1.2s linear infinite;
    /*Safari and Chrome*/
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -moz-transform: rotate(0deg);
        /* Firefox */
        -o-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        /* IE 9 */
        -moz-transform: rotate(360deg);
        /* Firefox */
        -o-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

.details-content {
    padding: 15px 24px;
    width: 100%;
    flex-grow: 1;
    /* overflow-y: auto; */
}

.details-content-title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 12px;
    display: block;
}

.details-content-misc {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.item {
    margin-right: 5px;
}

.details-content-misc-copy {
    color: #909aaa;
    padding: 0 5px;
    line-height: 18px;
    background: #f5f6f8;
    border: 0;
    border-radius: 2px;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
}

.details-content-misc-copy:hover {
    background-color: #e7e9ee;
}

.details-content-misc-copy-title {
    color: #909aaa;
    font-size: 12px;
}

.details-content-misc-name {
    color: #333333;
    font-size: 14px;
}

.details-content-misc-name:hover {
    color: #2c7ef8;
}

.details-content-misc-subtitle {
    color: #909aaa;
    font-size: 12px;
}

.details-content-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.details-content-tags-item {
    font-size: 12px;
    margin-right: 10px;
}

.details-content-fields {
    flex: 1;
    padding: 8px 16px;
    background-color: #fafbfb;
    /* margin-top: 10px; */
    border-radius: 4px;
    position: relative;
}

.details-content-fields-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 36px;
}

.details-content-fields-row-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details-content-fields-row-item-label {
    width: 100px;
    display: block;
    font-size: 12px;
    margin-right: 16px;
    color: #333333;
}

.details-content-fields-row-item-right {
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
}

.details-content-fields-row-item-rightTwo {
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-personInCharge-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}

.item-personInCharge-title {
    font-size: 12px;
    color: #333333;
    man-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-personInCharge-logo-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-personInCharge-logo-icon {
    font-size: 12px;
    color: #333333;
    margin-right: 5px;
    margin-left: 5px;
}

.details-content-type {
    font-size: 12px;
    color: #333333;
}

.details-content-date {
    font-size: 12px;
    color: #333333;
}

.details-content-date-icon {
    color: #909aaa;
    font-size: 16px;
    margin-left: 18px;
    margin-right: 18px;
    margin-top: 1px;
}

.details-content-project-icon {
    font-size: 12px;
    color: #909aaa;
    margin-right: 4px;
    margin-top: 2px;
}

.details-content-project-title {
    font-size: 12px;
    color: #909aaa;
}

.details-content-warehouse-title {
    font-size: 12px;
    color: #333333;
}

.details-content-milepost-title {
    font-size: 12px;
    color: #333333;
}

.details-content-branch-title {
    font-size: 12px;
    color: #333333;
}

.details-content-time-title {
    font-size: 12px;
    color: #333333;
}

.details-content-richtext {
    flex: 1;
    min-height: 40px;
    margin-top: 10px;
}

.details-content-subtask {
    margin-top: 10px;
    flex: 1;
}

.details-content-subtask-title {
    color: #333;
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: bold;
    display: block;
}

.task-table-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 4px;
    flex: 1;
}

.task-table-item:hover {
    background-color: #f5f6f8;
}

.task-table-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
}

.task-table-item-address {
    margin: 0 10px;
    padding: 0 5px;
    background: #f5f6f8;
    border: 0;
    border-radius: 2px;
    white-space: nowrap;
    cursor: pointer;
    color: #909aaa;
}

.task-table-item-address:hover {
    color: #333;
    background: #e7e9ee;
}

.task-table-item-address-title {
    font-size: 12px;
}

.task-table-item-title {
    cursor: pointer;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #2e405e;
    font-size: 12px;
    margin-right: 5px;
    min-width: 52px;
}

.task-table-item-title:hover {
    color: #1890ff;
}

.task-table-item-tag {
    margin-right: 5px;
}

.task-table-item-status {
    max-width: 52px;
    min-width: 22px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #909aaa;
    margin-right: 5px;
    font-size: 12px;
}

.task-table-item-datebox {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 5px;
    max-width: 140px;
    justify-content: flex-end;
}

.task-table-item-date {
    color: #909aaa;
    margin-right: 5px;
    font-size: 12px;
}

.task-table-item-overdue {
    font-size: 12px;
    color: #ff4949;
    min-width: 52px;
}

.task-table-item-member {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 111px;
    height: 20px;
}

.task-table-item-member-title {
    width: 86px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 5px;
}

.task-table-item-member-title:hover {
    color: #1890ff;
}

.task-table-item-member-logo {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #e47777;
}

.details-content-operation-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 5px;
    box-shadow: inset 0 -1px 0 0 #dadee3;
}

.details-content-operation-item:last-child {
    box-shadow: inset 0 -1px 0 0 white;
}

/deep/.el-tabs__header {
    margin-bottom: 0px;
}

.details-content-operation-item-icon {
    font-size: 14px;
    color: #909aaa;
    margin-right: 10px;
}

.details-content-operation-item-name {
    font-size: 16px;
    color: #333333;
    margin-right: 5px;
}

.details-content-operation-item-title {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    margin-right: 10px;
}

.details-content-operation-item-date {
    font-size: 12px;
    color: #909aaa;
}

.details-popover-item-icon {
    color: #909aaa;
    font-size: 14px;
    transition: transform 0.3s;
    cursor: pointer;
    margin-left: 5px;
}

.transformIcon {
    transform: rotateZ(-180deg);
}

.transformIconChoose {
    transform: rotateZ(0deg);
}

.task-enclosure-icon {
    color: #2e405e;
    font-size: 16px;
    margin-right: 5px;
    font-weight: 700;
}

.task-enclosure-title {
    color: #2e405e;
    font-size: 14px;
    margin-right: 16px;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.task-enclosure-size {
    font-size: 14px;
    font-weight: bold;
    color: #909aaa;
    display: block;
    margin-right: 20px;
}

.task-enclosure-member {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.task-enclosure-member-login {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-right: 5px;
}

.task-enclosure-member-title {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2e405e;
    font-size: 14px;
    font-weight: bold;
}

.task-enclosure-del-icon {
    font-size: 14px;
    color: #909aaa;
    margin-left: 20px;
}

.details-content-isMask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: rgba(0, 0, 0, 0.1); */
}

.details-content-relation {
    display: flex;
    flex-direction: row;
    /* margin-top: 10px; */
}
</style>
